<template>
  <div id="myChart" :style="{width: '100%', height: '200px'}"/>
</template>

<script>
export default {
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
    // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
          data: ['央行', '证监会', '银保监会']
        },
        color: [' #1a90fe', '#fabd15', '#f05960'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['65%', '90%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '央行' },
              { value: 310, name: '证监会' },
              { value: 234, name: '银保监会' }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '~@/assets/common';
#myChart {
  border-right:1px solid #eaeefb
  padding-right: 50px
}
</style>
